<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="css/libs/weui.css">
    <link rel="stylesheet" href="css/libs/jquery-weui.min.css">
    <link rel="stylesheet" href="css/project.css">
    <script src="js/libs/jquery-3.0.0.min.js"></script>
    <script src="js/libs/weui.js"></script>
    <script src="js/project.js"></script>
    <style>
        body{padding-bottom: 70px;}
        main{margin: 10px;border-radius: 6px;box-shadow: 0 0 3px #ccc;background: #fff;}

        .icon{display: inline-block;width: 20px;height: 20px;margin-right:10px;background: url("images/page4/icons2.png") no-repeat;background-size: 250px 40px;vertical-align: middle;}
        .icon2{background-position-x: -20px;}
        .icon3{background-position-x: -40px;}
        .icon4{background-position-x: -60px;}
        .icon5{background-position-x: -80px;}
        .icon6{background-position-x: -100px;}
        .icon7{background-position-x: -120px;}
        .weui_cells{margin: 0;border-radius: 6px;}
        .weui_cells:before,.weui_cells:after,.weui_cell.textarea:before{display: none;}
        .weui_cell{padding: 13px;}
        .weui_input{vertical-align: middle;display: inline-block;margin-bottom: 2px;}
        .weui_cell_bd{margin-bottom: -5px;}
        .weui_media_desc{line-height: 1.2em;}
        .weui_cells_radio .weui_check:checked + .weui_icon_checked:before{color: #bb000e;}

        .footer{position: fixed;z-index: 10;left: 0;right:0;bottom: 0;height:50px;background: #f2f2f2;border-top:solid 1px rgba(153, 160, 118, 0.83); padding: 8px;}
        .footer_hd{font-size: 15px;}
        .shopping-cart{display: inline-block;position: relative;width:40px;height: 40px;background: url("images/page4/icons.png") no-repeat;background-size: 120px 40px; background-position: -80px 0;vertical-align: middle; }
        .shopping-cart span{position: absolute;right:0;top:0;width:18px;height:18px;background: #bb000e;color:#fff;line-height:18px;border-radius: 50%;text-align: center;}
        .footer_bd{position: absolute;right: 10px;top:8px;font-size: 14px;line-height:1.2em;color: #333;}
        .footer_bd p:first-child{color: #bb000e; }

         .add{position:absolute;right:10px;top:8px;font-size: 20px;color: #333;height: 25px;}
         .add p{display: inline-block;font-size: 20px;line-height: 25px;padding: 0 5px;}
         .add i{display:inline-block;width:25px;height:25px;vertical-align: middle;background: url("images/page4/icons2.png") no-repeat;background-size: 250px 40px;background-position: -180px 0;}
         .add i:last-child{background-position:-220px 0; }

         .weui_switch{vertical-align: bottom;width: 62px;}
         .weui_switch:before{width: 60px;}
        .weui_switch:checked{background: none;border-color: #bb000e;}
        .switch_text{position: absolute;text-indent:5px;font-size:12px;line-height: 32px;color: #bb000e;}
        .weui_switch:checked:after{-webkit-transform: translateX(28px);transform: translateX(28px);}

        .weui_cell.msg:before{display: none;}
        .weui_cell.msg{margin:10px;margin-bottom: 0;background: #f2f2f2;padding-bottom: 0;font-size: 12px;}
        .weui_cell.msg:last-child{margin-top: 0;margin-bottom: 10px;padding-bottom: 10px;}
        .card{display: inline-block;width: 35px;height: 15px;text-align: center;background: #bb000e;color: #fff;font-size: 12px;border-radius: 3px;margin-right: 10px;}
    </style>
</head>
<body>
<header class="header">
    <span class="back"></span>
    <p class="title">用餐信息</p>
</header>
<div style="height: 40px;"></div>
<main>
    <!--<div style="text-align: center;"><img width="100" height="100" src="" alt=""></div>-->
    <div class="weui_cells weui_cells_access weui_cells_radio">
        <div class="weui_cell">
            <div class="weui_cell_hd"><span class="icon icon1"></span></div>
            <div class="weui_cell_bd weui_cell_primary">
                订餐
            </div>
            <div class="weui_cell_ft">已选3份菜品</div>
        </div>
        <div class="weui_cell">
            <div class="weui_cell_hd"><span class="icon icon2"></span></div>
            <div class="weui_cell_bd weui_cell_primary">
                用餐人数
            </div>
            <div class="weui_cell_bd">
                <div class="add">
                    <i></i> <p>2</p> <i></i>
                </div>
            </div>
        </div>
        <div class="weui_cell weui_cell_switch">
            <div class="weui_cell_hd"><span class="icon icon3"></span></div>
            <div class="weui_cell_bd weui_cell_primary">
                餐具
            </div>
            <div class="weui_cell_bd">
                <span class="switch_text">需要</span>
                <input class="weui_switch" type="checkbox">
            </div>
        </div>

        <div class="weui_cell weui_cell_switch">
            <div class="weui_cell_hd"><span class="icon icon4"></span></div>
            <div class="weui_cell_bd weui_cell_primary">
                辣度
            </div>
            <div class="weui_cell_bd">
                <span class="switch_text">不辣</span>
                <input class="weui_switch" type="checkbox">
            </div>
        </div>
        <div class="weui_cell weui_cell_switch">
            <div class="weui_cell_hd"><span class="icon icon5"></span></div>
            <div class="weui_cell_bd weui_cell_primary">
                <p>积分抵扣</p>
                <p style="font-size: 12px;">周末及节假日可获得双倍猫眼石</p>
            </div>
            <div class="weui_cell_bd">
                <span class="switch_text">使用</span>
                <input class="weui_switch" type="checkbox">
            </div>
        </div>


        <div class="weui_cell ">
            <div class="weui_cell_hd"><span class="icon icon6"></span></div>
            <div class="weui_cell_bd weui_cell_primary">配送费</div>
            <div class="weui_cell_bd">
                ￥0
            </div>
        </div>

        <div class="weui_cell weui_cell_switch">
            <div class="weui_cell_hd"><span class="icon icon7"></span></div>
            <div class="weui_cell_bd weui_cell_primary">
                微信卡券
            </div>
            <div class="weui_cell_bd">
                <span class="switch_text">今天</span>
                <input class="weui_switch" type="checkbox">
            </div>
        </div>

        <div class="weui_cell weui_cell_select ">
            <div class="weui_cell_hd"><span class="icon icon8"></span></div>
            <label for="" class="weui_label weui_cell_bd weui_cell_primary">
                支付方式
            </label>
            <div class="weui_cell_bd">
                <select class="weui_select">
                    <option value="" selected>微信支付</option>
                    <option value="">**支付</option>
                    <option value="">**支付</option>
                </select>
            </div>
        </div>

        <div class="weui_cell msg">
            <div class="weui_cell_hd weui_cell_primary">已为您选择最优惠的方式</div>
            <div class="weui_cell_hd" style="color: #bb000e;text-decoration: underline;">修改</div>
        </div>
        <div class="weui_cell msg">
            <div class="weui_cell_hd " style="white-space: nowrap;"><span class="card">卡券</span><span>-￥30</span></div>
            <div class="weui_cell_bd weui_cell_primary" style="text-align: right;">满100送30【序列号:3721267782】</div>
        </div>

    </div>
</main>

<div style="font-size: 13px;color: #999; margin: 0 20px;">
    地址超出免费送餐区域，需要您支付来回出租车费，实际费
    用以送餐时发票为准
</div>

<!-- 已达到起送标准 -->
<div class="footer">
    <div class="footer_hd">
        <div class="shopping-cart">
            <span>2</span>
        </div>
        <span style="color: #bb000e; ">合计:￥414</span>
    </div>
    <a href="page7.html" class="footer_bd" style="top:-16px;">
        <img width="163" height="65" src="images/page4/pay.png">
    </a>
</div>


</body>
</html>